<template>
  <el-dialog
      v-model="dialogVisible"
      title="用户信息"
      width="500px"
      @close="resetForm"
  >
    <el-form :model="formData" ref="userForm">
      <el-form-item label="姓名:">
        <el-input v-model="formData.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所属校区:">
        <el-select v-model="formData.campus" placeholder="请选择校区">
          <el-option
              v-for="campus in campusList"
              :key="campus.id"
              :label="campus.campusName"
              :value="campus.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门:">
        <el-cascader
            v-model="formData.department"
            :options="departmentTree"
            :show-all-levels="false"
            :props="{
            emitPath:false,
            value: 'id',
            label: 'name',
            children: 'children',
            checkStrictly: true,
          }"
            placeholder="请选择部门"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="账号:">
        <el-input v-model="formData.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号:">
        <el-input v-model="formData.contact" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input v-model="formData.email" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => ({}),
    },
    departmentTree: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogVisible: false,
      formData: {},
    };
  },
  computed: {
    campusList() {
      return this.$store.getters.getCampusList;
    },
  },
  methods: {
    openDialog() {
      this.formData = {...this.user};
      this.dialogVisible = true;
    },
    resetForm() {
      this.$refs.userForm.resetFields();
    },
    handleSubmit() {
      this.$emit("save", this.formData);
      this.dialogVisible = false;
    },
  },
  watch: {
    user(newVal) {
      this.formData = {...newVal};
    },
  },
  emits: ["save"],
};
</script>
